// Javascript code
/*
 * author: 小小游 --- allen
 * date: 2019.09.23
 * lastUpdateDate: 2019.10.30
 * description: 来宁PC官网首页相关js
 */
// 一些公用的全局变量，记录每屏切换的索引值
let iIndex = 0;
// iNow变量，记录是第几个选项卡
let iNow = 0;
// 索引值
let prevIndex = 0;
// 获取主内容区域元素
let oCoreCont = document.querySelectorAll ( ".coreCont" )[0];
// 每屏的父级
let oScreList = document.querySelectorAll ( ".screList" )[0];
// 第一屏banner图元素
let oMyBanner = document.querySelectorAll ( ".myBanner" )[0];
// 获取每一屏元素
let aCommonS = document.querySelectorAll ( ".commonS" );
// 头部元素
let oHeader = document.querySelectorAll ( ".commonHeader" )[0];

// 首页 start
// 获取banner图相关的元素
let oUl = oMyBanner.querySelectorAll ( "ul" )[0];
let aLi = oMyBanner.querySelectorAll ( "li" );
// 首页 end

// 公司文化的相关元素 start
let oGeneralizations = document.querySelectorAll ( ".generalizations" )[0];
let oTitle = oGeneralizations.querySelectorAll ( ".title" )[0];
let oIntroduction = document.querySelectorAll ( ".introduction" )[0];
let oP = oIntroduction.querySelectorAll ( "p" )[0];
let oGrowUp = document.querySelectorAll ( ".growUp" )[0];
let oHGrowUpH2 = oGrowUp.querySelectorAll ( "h2" )[0];
let oGrowUpDesc = oGrowUp.querySelectorAll ( "p" )[0];
let oBeEnterprising = document.querySelectorAll ( ".beEnterprising" )[0];
let oBeEnterprisingH2 = oBeEnterprising.querySelectorAll ( "h2" )[0];
let oBeEnterprisingDesc = oBeEnterprising.querySelectorAll ( "p" )[0];
// 公司文化的相关元素 end

// 求职招聘的相关元素 start
let oMyPosBtn = document.querySelectorAll ( ".myPosBtn" )[0];
let oDividingLine = document.querySelectorAll ( ".dividingLine" )[0];
let oMyPosCont = document.querySelectorAll ( ".myPosCont" )[0];
let oThreeCenter = document.querySelectorAll ( ".threeCenter" )[0];
// 求职招聘的相关元素 end

// 关于我们相关元素 start
let oFourScreen = document.querySelectorAll ( ".fourScreen" )[0];
let aItemBox = oFourScreen.querySelectorAll ( ".item_box" );
// 关于我们相关元素 end

// 联系我们相关元素 start
let oContactUs = document.querySelectorAll ( ".contactUs" )[0];
let oImg = oContactUs.querySelectorAll ( "img" )[0];
let oAddr = oContactUs.querySelectorAll ( ".addr" )[0];
let oQt = oContactUs.querySelectorAll ( ".qt" )[0];
// 联系我们相关元素 end

// 轮播圆点相关元素 start
let oScreenCircle = document.querySelectorAll ( ".screenCircle" )[0];
let aCircle = oScreenCircle.querySelectorAll ( "a" );
// 轮播圆点相关元素 end

// 通用的元素 start
let aMyArrow = document.querySelectorAll ( ".myArrow" );
// 通用的元素 end

// 定义CSS3的动画
let cjAnimate = [
	// 第一屏 - 首页 - 入场和出场动画
	{
		inAn: function () {
			css ( oUl, "opacity", 100 );
			css ( oUl, "top", 0 );
			css ( oUl, "transition", '.6s .5s' );
			css ( oUl, "WebkitTransition", '.6s .5s' );
			
			let oMyNav = document.querySelectorAll ( ".myNav" )[0];
			css ( oMyNav, "opacity", 100 );
			css ( oMyNav, "bottom", "55px" );
			css ( oMyNav, "transition", '.6s .5s' );
			css ( oMyNav, "WebkitTransition", '.6s .5s' );
			
			css ( aMyArrow[0], "opacity", 100 );
			css ( aMyArrow[0], "bottom", "80px" );
			css ( aMyArrow[0], "transition", '.6s 1.2s' );
			css ( aMyArrow[0], "WebkitTransition", '.6s 1.2s' );
		},
		outAn: function () {
			css ( oUl, "opacity", 0 );
			css ( oUl, "top", "-100px" );
			css ( oUl, "transition", '0s' );
			css ( oUl, "WebkitTransition", '0s' );
			
			let oMyNav = document.querySelectorAll ( ".myNav" )[0];
			css ( oMyNav, "opacity", 0 );
			css ( oMyNav, "bottom", "0" );
			css ( oMyNav, "transition", '0s' );
			css ( oMyNav, "WebkitTransition", '0s' );
			
			css ( aMyArrow[0], "opacity", 0 );
			css ( aMyArrow[0], "bottom", "0" );
			css ( aMyArrow[0], "transition", '0s' );
			css ( aMyArrow[0], "WebkitTransition", '0s' );
		}
	},
	// 第二屏 - 公司文化 - 入场和出场动画
	{
		inAn: function () {
			css ( oTitle, "opacity", 100 );
			css ( oTitle, 'top', '132px' );
			css ( oTitle, "transition", '.6s .5s' );
			css ( oTitle, "WebkitTransition", '.6s .5s' );
			
			css ( oP, "opacity", 100 );
			css ( oP, 'top', '270px' );
			css ( oP, "transition", '.6s .9s' );
			css ( oP, "WebkitTransition", '.6s .9s' );
			
			css ( oHGrowUpH2, "opacity", 100 );
			css ( oHGrowUpH2, 'left', '300px' );
			css ( oHGrowUpH2, "transition", '.6s 1.5s' );
			css ( oHGrowUpH2, "WebkitTransition", '.6s 1.5s' );
			
			css ( oGrowUpDesc, "opacity", 100 );
			css ( oGrowUpDesc, 'left', '300px' );
			css ( oGrowUpDesc, "transition", '.6s 2.1s' );
			css ( oGrowUpDesc, "WebkitTransition", '.6s 2.1s' );
			
			css ( oBeEnterprisingH2, "opacity", 100 );
			css ( oBeEnterprisingH2, 'left', '300px' );
			css ( oBeEnterprisingH2, "transition", '.6s 2.7s' );
			css ( oBeEnterprisingH2, "WebkitTransition", '.6s 2.7s' );
			
			css ( oBeEnterprisingDesc, "opacity", 100 );
			css ( oBeEnterprisingDesc, 'left', '300px' );
			css ( oBeEnterprisingDesc, "transition", '.6s 3.3s' );
			css ( oBeEnterprisingDesc, "WebkitTransition", '.6s 3.3s' );
			
			css ( aMyArrow[1], "opacity", 100 );
			css ( aMyArrow[1], "bottom", "80px" );
			css ( aMyArrow[1], "transition", '.6s 3.9s' );
			css ( aMyArrow[1], "WebkitTransition", '.6s 3.9s' );
		},
		outAn: function () {
			css ( oTitle, "opacity", 0 );
			css ( oTitle, 'top', '100%' );
			css ( oTitle, "transition", '0s' );
			css ( oTitle, "WebkitTransition", '0s' );
			
			css ( oP, "opacity", 0 );
			css ( oP, 'top', '-100%' );
			css ( oP, "transition", '0s' );
			css ( oP, "WebkitTransition", '0s' );
			
			css ( oHGrowUpH2, "opacity", 0 );
			css ( oHGrowUpH2, 'left', '100%' );
			css ( oHGrowUpH2, "transition", '0s' );
			css ( oHGrowUpH2, "WebkitTransition", '0s' );
			
			css ( oGrowUpDesc, "opacity", 0 );
			css ( oGrowUpDesc, 'left', '-100%' );
			css ( oGrowUpDesc, "transition", '0s' );
			css ( oGrowUpDesc, "WebkitTransition", '0s' );
			
			css ( oBeEnterprisingH2, "opacity", 0 );
			css ( oBeEnterprisingH2, 'left', '-100%' );
			css ( oBeEnterprisingH2, "transition", '0s' );
			css ( oBeEnterprisingH2, "WebkitTransition", '0s' );
			
			css ( oBeEnterprisingDesc, "opacity", 0 );
			css ( oBeEnterprisingDesc, 'left', '100%' );
			css ( oBeEnterprisingDesc, "transition", '0s' );
			css ( oBeEnterprisingDesc, "WebkitTransition", '0s' );
			
			css ( aMyArrow[1], "opacity", 0 );
			css ( aMyArrow[1], "bottom", "0" );
			css ( aMyArrow[1], "transition", '0s' );
			css ( aMyArrow[1], "WebkitTransition", '0s' );
		}
	},
	// 第三屏 - 求职招聘 - 入场和出场动画
	{
		inAn: function () {
			css ( oThreeCenter, "opacity", 100 );
			css ( oThreeCenter, 'top', '0' );
			css ( oThreeCenter, "transition", '.6s .5s' );
			css ( oThreeCenter, "WebkitTransition", '.6s .5s' );
			
			css ( oDividingLine, 'opacity', 100 );
			css ( oDividingLine, 'top', '47px' );
			css ( oDividingLine, "transition", '.6s .9s' );
			css ( oDividingLine, "WebkitTransition", '.6s .9s' );
			
			css ( oMyPosBtn, "opacity", 100 );
			css ( oMyPosBtn, 'left', '15px' );
			css ( oMyPosBtn, "transition", '.6s 1.5s' );
			css ( oMyPosBtn, "WebkitTransition", '.6s 1.5s' );
			
			css ( oMyPosCont, "opacity", 100 );
			css ( oMyPosCont, 'left', '180px' );
			css ( oMyPosCont, "transition", '.6s 2.1s' );
			css ( oMyPosCont, "WebkitTransition", '.6s 2.1s' );
			
			css ( aMyArrow[2], "opacity", 100 );
			css ( aMyArrow[2], "bottom", "80px" );
			css ( aMyArrow[2], "transition", '.6s 2.7s' );
			css ( aMyArrow[2], "WebkitTransition", '.6s 2.7s' );
		},
		outAn: function () {
			css ( oThreeCenter, "opacity", 0 );
			css ( oThreeCenter, 'top', '-100%' );
			css ( oThreeCenter, "transition", '0s' );
			css ( oThreeCenter, "WebkitTransition", '0s' );
			
			css ( oDividingLine, 'opacity', 0 );
			css ( oDividingLine, 'top', '100%' );
			css ( oDividingLine, "transition", '0s' );
			css ( oDividingLine, "WebkitTransition", '0s' );
			
			css ( oMyPosBtn, "opacity", 0 );
			css ( oMyPosBtn, 'left', '100%' );
			css ( oMyPosBtn, "transition", '0s' );
			css ( oMyPosBtn, "WebkitTransition", '0s' );
			
			css ( oMyPosCont, "opacity", 0 );
			css ( oMyPosCont, 'left', '-100%' );
			css ( oMyPosCont, "transition", '0s' );
			css ( oMyPosCont, "WebkitTransition", '0s' );
			
			css ( aMyArrow[2], "opacity", 0 );
			css ( aMyArrow[2], "bottom", "0" );
			css ( aMyArrow[2], "transition", '0s' );
			css ( aMyArrow[2], "WebkitTransition", '0s' );
		}
	},
	// 第四屏 - 关于我们 - 入场和出场动画
	{
		inAn: function () {
			let result = window.matchMedia ( '( min-width: 1921px )' );
			if ( result.matches ) { 
				// console.log ( "大于等于1921px的屏幕" );
				css ( aItemBox[0], "opacity", 100 );
				css ( aItemBox[0], "top", "37.5%" );
				css ( aItemBox[0], "transition", '.6s .5s' );
				css ( aItemBox[0], "WebkitTransition", '.6s .5s' );
				
				css ( aItemBox[1], "opacity", 100 );
				css ( aItemBox[1], "top", "57.5%" );
				css ( aItemBox[1], "transition", '.6s .9s' );
				css ( aItemBox[1], "WebkitTransition", '.6s .9s' );
				
				css ( aItemBox[2], "opacity", 100 );
				css ( aItemBox[2], "top", "78.5%" );
				css ( aItemBox[2], "transition", '.6s 1.5s' );
				css ( aItemBox[2], "WebkitTransition", '.6s 1.5s' );
				
				css ( aMyArrow[3], "opacity", 100 );
				css ( aMyArrow[3], "bottom", "80px" );
				css ( aMyArrow[3], "transition", '.6s 2.1s' );
				css ( aMyArrow[3], "WebkitTransition", '.6s 2.1s' );
			} else {
				// console.log ( "小于等于1920px的屏幕" );
				css ( aItemBox[0], "opacity", 100 );
				css ( aItemBox[0], "top", "35.5%" );
				css ( aItemBox[0], "transition", '.6s .5s' );
				css ( aItemBox[0], "WebkitTransition", '.6s .5s' );
				
				css ( aItemBox[1], "opacity", 100 );
				css ( aItemBox[1], "top", "53%" );
				css ( aItemBox[1], "transition", '.6s .9s' );
				css ( aItemBox[1], "WebkitTransition", '.6s .9s' );
				
				css ( aItemBox[2], "opacity", 100 );
				css ( aItemBox[2], "top", "76%" );
				css ( aItemBox[2], "transition", '.6s 1.5s' );
				css ( aItemBox[2], "WebkitTransition", '.6s 1.5s' );
				
				css ( aMyArrow[3], "opacity", 100 );
				css ( aMyArrow[3], "bottom", "80px" );
				css ( aMyArrow[3], "transition", '.6s 2.1s' );
				css ( aMyArrow[3], "WebkitTransition", '.6s 2.1s' );
			}
		},
		outAn: function () {
			let result = window.matchMedia ( '( min-width: 1921px )' );
			if ( result.matches ) { 
				// console.log ( "大于等于1921px的屏幕" );
				css ( aItemBox[0], "opacity", 0 );
				css ( aItemBox[0], "top", "37.5%" );
				css ( aItemBox[0], "transition", '0s' );
				css ( aItemBox[0], "WebkitTransition", '0s' );
				
				css ( aItemBox[1], "opacity", 0 );
				css ( aItemBox[1], "top", "37.5%" );
				css ( aItemBox[1], "transition", '0s' );
				css ( aItemBox[1], "WebkitTransition", '0s' );
				
				css ( aItemBox[2], "opacity", 0 );
				css ( aItemBox[2], "top", "37.5%" );
				css ( aItemBox[2], "transition", '0s' );
				css ( aItemBox[2], "WebkitTransition", '0s' );
				
				css ( aMyArrow[3], "opacity", 0 );
				css ( aMyArrow[3], "bottom", "0" );
				css ( aMyArrow[3], "transition", '0s' );
				css ( aMyArrow[3], "WebkitTransition", '0s' );
			} else {
				// console.log ( "小于等于1920px的屏幕" );
				css ( aItemBox[0], "opacity", 0 );
				css ( aItemBox[0], "top", "35.5%" );
				css ( aItemBox[0], "transition", '0s' );
				css ( aItemBox[0], "WebkitTransition", '0s' );
				
				css ( aItemBox[1], "opacity", 0 );
				css ( aItemBox[1], "top", "35.5%" );
				css ( aItemBox[1], "transition", '0s' );
				css ( aItemBox[1], "WebkitTransition", '0s' );
				
				css ( aItemBox[2], "opacity", 0 );
				css ( aItemBox[2], "top", "35.5%" );
				css ( aItemBox[2], "transition", '0s' );
				css ( aItemBox[2], "WebkitTransition", '0s' );
				
				css ( aMyArrow[3], "opacity", 0 );
				css ( aMyArrow[3], "bottom", "0" );
				css ( aMyArrow[3], "transition", '0s' );
				css ( aMyArrow[3], "WebkitTransition", '0s' );
			}
		}
	},
	// 第五屏 - 联系我们 - 入场和出场动画
	{
		inAn: function () {
			css ( oImg, "opacity", 100 );
			css ( oImg, "top", "0" );
			css ( oImg, "transition", '.6s .5s' );
			css ( oImg, "WebkitTransition", '.6s .5s' );
			
			css ( oAddr, "opacity", 100 );
			css ( oAddr, "top", "0" );
			css ( oAddr, "transition", '.6s .9s' );
			css ( oAddr, "WebkitTransition", '.6s .9s' );
			
			css ( oQt, "opacity", 100 );
			css ( oQt, "top", "0" );
			css ( oQt, "transition", '.6s 1.5s' );
			css ( oQt, "WebkitTransition", '.6s 1.5s' );
			
			css ( aMyArrow[4], "opacity", 100 );
			css ( aMyArrow[4], "bottom", "80px" );
			css ( aMyArrow[4], "transition", '.6s 2.1s' );
			css ( aMyArrow[4], "WebkitTransition", '.6s 2.1s' );
		},
		outAn: function () {
			css ( oImg, "opacity", 0 );
			css ( oImg, "top", "100%" );
			css ( oImg, "transition", '0s' );
			css ( oImg, "WebkitTransition", '0s' );
			
			css ( oAddr, "opacity", 0 );
			css ( oAddr, "top", "100%" );
			css ( oAddr, "transition", '0s' );
			css ( oAddr, "WebkitTransition", '0s' );
			
			css ( oQt, "opacity", 0 );
			css ( oQt, "top", "100%" );
			css ( oQt, "transition", '0s' );
			css ( oQt, "WebkitTransition", '0s' );
			
			css ( aMyArrow[4], "opacity", 0 );
			css ( aMyArrow[4], "bottom", "0" );
			css ( aMyArrow[4], "transition", '0s' );
			css ( aMyArrow[4], "WebkitTransition", '0s' );
		}
	}
];

// JS的入口函数
window.onload = function () {
	// 上来先调用一下
	myNav.init ();
	
	// 调用来宁PC官网头部右上方炫酷的下拉菜单(鼠标移入移出效果)
	myDropDownMenu ();
	
	// 调用设置轮播图的高度
	myBanner.setBannerWH ();
	
	// 调用banner区域的一些效果
	myBanner.setHoverEffect ();
	
	// 监听高度的变化 - resize事件
	commonWH.listenerHChange ();
	
	// 设置主区域内容显示的高度
	commonWH.setMainCoreH ();
	
	// 设置具体每一屏里面的核心内容垂直居中
	commonWH.countThreeScreenH ();
	
	// 我滑动鼠标的滚轮操作
	myMouseWheel.slideScreen ();
	
	// PC端自定义滚动条
	customScrollBar.init ();
	
	// CSS3酷炫动画，先将每一屏出场，然后在滚屏的时候调用入场动画
	css3Animate.init ();
	
	// 底部的一些滑动效果
	myFooterSlide.init ();
	
	// 我的菜单hash值的设置
	mySetHash.init ();
	
	// 求职招聘版块
	jobHunting.init ();
	
	// 我的loading效果
	myLoading.init ();
	
	// 点击我的箭头
	myArrow.init ();
};

// 头部导航菜单
let myNav = ( function () {
	let oNav = document.querySelectorAll ( ".nav" )[0];
	let aLi = oNav.querySelectorAll ( "li" );
	let aA = oNav.querySelectorAll ( "a" );
	let oLine = document.querySelectorAll ( ".line" )[0];
	// 建立一个开关
	let onOff = true; 
	// 建立一个定时器变量
	let timer = null;
	
	// 初始化下划线的宽度
	oLine.style.width = aA[0].offsetWidth + 'px';
	
	function init () {
		// 调用设置导航菜单
		setHeaderNav ();
	}
	
	// 头部导航菜单点击切换
	function setHeaderNav () {
		// 初始化文字的颜色
		aLi[iIndex].querySelectorAll ( "em" )[0].style.width = '100%';
		// 记录初始化下滑线的位置
		let oldValue = oLine.style.left = aLi[iIndex].offsetLeft + aLi[iIndex].offsetWidth / 2 - oLine.offsetWidth / 2 + 'px';
		
		// 滚屏圆点
		for ( let i = 0, len = aCircle.length; i < len; i++ ) {
			// 添加自定义索引值
			aCircle[i].index = i;
			aCircle[i].addEventListener ( "click", myCommonSlideFn, false );
		}
		
		// 点击的导航菜单
		for ( let i = 0, len = aLi.length; i < len; i++ ) {
			// 添加自定义索引值
			aLi[i].index = i;
			aLi[i].addEventListener ( "click", myCommonSlideFn, false );
			
			aLi[i].addEventListener ( "mouseover", function () {
				onOff = true;
				// 如果一上来就是false，表示用户点击了某个导航菜单，那么不执行下面的代码
				if ( !onOff ) return;
				for ( let i = 0, len = aLi.length; i < len; i++ ) {
					aLi[i].getElementsByTagName ( "em" )[0].style.cssText = "width: 0%;";
				}
				this.getElementsByTagName ( "em" )[0].style.cssText = "width: 100%;";
				// 当前线要滑动到的位置
				oLine.style.left = this.offsetLeft + this.offsetWidth / 2 - oLine.offsetWidth / 2 + 'px';
			}, false );
			
			aLi[i].addEventListener ( "mouseout", function () {
				onOff = true;
				// 如果一上来就是false，表示用户点击了某个导航菜单，那么不执行下面的代码
				if ( !onOff ) return;
				// 先清除所有
				for ( let i = 0, len = aLi.length; i < len; i++ ) {
					aLi[i].getElementsByTagName ( "em" )[0].style.cssText = "width: 0%;";
				}
				// 如果当前用户是没有点击的，那么返回没有点击的那个滑块上，并且加active
				if ( onOff ) {
					aLi[iIndex].getElementsByTagName ( "em" )[0].style.cssText = "width: 100%;";
				}
				// 鼠标移出的时候回到用户点击的那一个导航菜单上
				oLine.style.left = aLi[iIndex].offsetLeft + aLi[iIndex].offsetWidth / 2 - oLine.offsetWidth / 2 + 'px';
			}, false );
		}
	}
	
	// 我的通用滑动函数
	function myCommonSlideFn () {
		// 如果已经是在当前的菜单，防止重复点击
		if ( this.index == iIndex ) return;
		// 记录上一屏的索引值
		prevIndex = iIndex;
		// 当前滚到第几屏，通过下标来记录
		iIndex = this.index;
		// 创建鼠标事件
		let oEvObj = document.createEvent ( "MouseEvents" );
		// 这里的click可以换成你想触发的行为
		oEvObj.initEvent ( "click", true, true );　
		// 循环加事件
		for ( let i = 0; i < aA.length; i++ ) {
			// 这里的aA[iIndex]可以换成你想触发行为的DOM节点
			aA[iIndex].dispatchEvent ( oEvObj );
		}
	}
	
	// 菜单的移动效果 - 方法提取
	function toMoveNav ( index ) {
		// 点击的时候将开关设置为false
		onOff = false;
		
		// 先清除所有
		for ( let i = 0, len = aCircle.length; i < len; i++ ) {
			aCircle[i].className = '';
		}
		
		// 先清除所有
		for ( let i = 0, len = aLi.length; i < len; i++ ) {
			aLi[i].querySelectorAll ( "em" )[0].style.width = '0%';
		}
		
		// 再在当前加上active
		aCircle[index].className = 'active';
		
		// 点击了把当前的选中
		aLi[index].querySelectorAll ( "em" )[0].style.width = '100%';
		
		// 点击的导航切换的时候，设置定位的top变化即可
		oScreList.style.top = -index * viewHeight () + 'px';
		
		// 在用户点击了滑动到的left值存在一个变量里，当用户鼠标移出的时候再把当前的值赋值给oLine的left值
		oldValue = oLine.style.left = aLi[index].offsetLeft + aLi[index].offsetWidth / 2 - oLine.offsetWidth / 2 + 'px';
		
		// 判断下如果有出场的动画函数，那么上一屏就调用下出场动画
		if ( cjAnimate[prevIndex].outAn ) cjAnimate[prevIndex].outAn ();
		
		// 判断下如果有入场的动画函数，那么就调用一下入场动画
		if ( cjAnimate[index].inAn ) cjAnimate[index].inAn ();
	}
	
	// 向外暴露，让外面可以访问到这个方法
	return {
		init: init,
		toMoveNav: toMoveNav
	};
}) ();

// 来宁PC官网头部右上方炫酷的下拉菜单(鼠标移入移出效果)
let myDropDownMenu = ( function () {
	let oBox = document.getElementById ( 'fold_box' );
	let fold = document.getElementById ( 'fold' );
	let oH2 = fold.getElementsByTagName ( 'h2' )[0];
	let div = document.getElementById ( 'paper' );
	let aDiv = fold.getElementsByTagName ( 'div' );
	let aA = fold.getElementsByTagName ( 'a' );
	let aSpan = fold.getElementsByTagName ( 'span' );
	let oTime = null;
	let oTimer = null;
	let iNow = 0;
	/** let arrA = [
		'<a href="javascript:;" target="_blank">产品运营<em style="position: absolute; right: 32px; top: 13px; width: 9px; height: 16px; background: url(./images/icon_ico.png) no-repeat -28px -308px; background-size: 66px 400px;"></em></a>',
		'<a href="javascript:;" target="_blank">主播运营<em style="position: absolute; right: 32px; top: 13px; width: 9px; height: 16px; background: url(./images/icon_ico.png) no-repeat -28px -308px; background-size: 66px 400px;"></em></a>',
		'<a href="javascript:;" target="_blank">槟榔运营<em style="position: absolute; right: 32px; top: 13px; width: 9px; height: 16px; background: url(./images/icon_ico.png) no-repeat -28px -308px; background-size: 66px 400px;"></em></a>',
		'<a href="javascript:;" target="_blank">抖音摄影<em style="position: absolute; right: 32px; top: 13px; width: 9px; height: 16px; background: url(./images/icon_ico.png) no-repeat -28px -308px; background-size: 66px 400px;"></em></a>',
		'<a href="javascript:;" target="_blank">抖音主播<em style="position: absolute; right: 32px; top: 13px; width: 9px; height: 16px; background: url(./images/icon_ico.png) no-repeat -28px -308px; background-size: 66px 400px;"></em></a>',
		'<a href="javascript:;" target="_blank">招聘专员<em style="position: absolute; right: 32px; top: 13px; width: 9px; height: 16px; background: url(./images/icon_ico.png) no-repeat -28px -308px; background-size: 66px 400px;"></em></a>',
		'<a style="border: 0 none;" href="javascript:;" target="_blank">业务代理<em style="position: absolute; right: 32px; top: 13px; width: 9px; height: 16px; background: url(./images/icon_ico.png) no-repeat -28px -308px; background-size: 66px 400px;"></em></a>'
	]; */
	
	let arrA = [
		'<a href="javascript:;" target="_blank">公司公告<em style="position: absolute; right: 32px; top: 13px; width: 9px; height: 16px; background: url(./images/icon_ico.png) no-repeat -28px -308px; background-size: 66px 400px;"></em></a>',
		'<a href="javascript:;" target="_blank">公司旅游<em style="position: absolute; right: 32px; top: 13px; width: 9px; height: 16px; background: url(./images/icon_ico.png) no-repeat -28px -308px; background-size: 66px 400px;"></em></a>',
		'<a href="javascript:;" target="_blank">团建活动<em style="position: absolute; right: 32px; top: 13px; width: 9px; height: 16px; background: url(./images/icon_ico.png) no-repeat -28px -308px; background-size: 66px 400px;"></em></a>',
		'<a style="border: 0 none;" href="javascript:;" target="_blank">生日会<em style="position: absolute; right: 32px; top: 13px; width: 9px; height: 16px; background: url(./images/icon_ico.png) no-repeat -28px -308px; background-size: 66px 400px;"></em></a>',
	];

	for ( let i = 0; i < arrA.length; i++ ) {
		div.innerHTML = arrA[i] + '<span></span><div></div>';
		div = div.getElementsByTagName('div')[0];

		setY ( aA[i], i % 2 == 0 ? 'bottom' : 'top' );
		setY ( aSpan[i], i % 2 == 0 ? 'bottom' : 'top' );
		setTranslateZ ( aSpan[i], i % 2 == 0 ? 1 : -1 );

		i % 2 == 0 && setRotateX ( aA[i], 180 );
	}
	
	for ( let i = 0; i < aDiv.length; i++ ) {
		aDiv[i].className = 'T3D';
		setOrigin ( aDiv[i], i % 2 == 0 ? 'bottom' : 'top' );
	}

	function setOrigin ( obj, val ) {
		obj.style.msTransformOrigin = val;
		obj.style.MozTransformOrigin = val;
		obj.style.WebkitTransformOrigin = val;
		obj.style.OTransformOrigin = val;
		obj.style.transformOrigin = val;
	}

	function setRotateX ( obj, val ) {
		obj.style.msTransform = 'rotateX(' + val + 'deg)';
		obj.style.MozTransform = 'rotateX(' + val + 'deg)';
		obj.style.WebkitTransform = 'rotateX(' + val + 'deg)';
		obj.style.OTransform = 'rotateX(' + val + 'deg)';
		obj.style.transform = 'rotateX(' + val + 'deg)';
	}

	function setY ( obj, attr ) {
		obj.style[attr] = 0;
	}

	function setTranslateZ ( obj, val ) {
		obj.style.msTransform = 'translateZ(' + val + 'px)';
		obj.style.MozTransform = 'translateZ(' + val + 'px)';
		obj.style.WebkitTransform = 'translateZ(' + val + 'px)';
		obj.style.OTransform = 'translateZ(' + val + 'px)';
		obj.style.transform = 'translateZ(' + val + 'px)';
	}

	oBox.onmousemove = function ( ev ) {
		let oEvent = ev || window.event;
		let pos = oEvent.clientX - this.offsetLeft;
		let deg = 25;
		let degTarget = 0;

		clearTimeout ( oBox.timer );

		if ( oEvent.clientX < this.offsetLeft + this.offsetWidth / 2 ) {
			degTarget = ( deg - Math.floor ( pos / 100 * deg ) ) * -1;
		} else {
			degTarget = ( deg - Math.floor ( ( this.offsetWidth - pos ) / 100 * deg ) );
		}
		fold.style.msTransform = 'rotateY(' + degTarget + 'deg)';
		fold.style.MozTransform = 'rotateY(' + degTarget + 'deg)';
		fold.style.WebkitTransform = 'rotateY(' + degTarget + 'deg)';
		fold.style.oTransform = 'rotateY(' + degTarget + 'deg)';
		fold.style.Transform = 'rotateY(' + degTarget + 'deg)';
	};
	
	oBox.onmouseout = function () {
		oBox.timer = setTimeout ( function () {
			fold.style.msTransform = 'rotateY(' + 0 + 'deg)';
			fold.style.MozTransform = 'rotateY(' + 0 + 'deg)';
			fold.style.WebkitTransform = 'rotateY(' + 0 + 'deg)';
			fold.style.oTransform = 'rotateY(' + 0 + 'deg)';
			fold.style.Transform = 'rotateY(' + 0 + 'deg)';
		}, 1500 );
	};

	fold.onmouseover = function () {
		clearTimeout ( oTime );
		setElegant ( 180 );
	};

	fold.onmouseout = function () {
		oTime = setTimeout ( function () {
			setElegant ( 0 );
		}, 300 );
	};

	function setElegant ( target ) {
		let dir = target == 180 ? 1 : -1;
		clearInterval ( oTimer );
		oTimer = setInterval ( function () {
			setRotate ( aDiv[iNow], target );
			iNow += dir;
			if ( iNow == aDiv.length && dir == 1 || iNow == -1 && dir == -1 ) {
				clearInterval ( oTimer );
				iNow = dir == 1 ? aDiv.length - 1 : 0;
			}
		}, 140 );
	}

	function setRotate ( obj, target, endFn ) {
		setTimeout ( function () {
			if ( obj.getElementsByTagName ( 'span' )[0] )
				obj.getElementsByTagName ( 'span' )[0].style.background = target == 180 ? '#fff' : '#dfdfdf';
		}, 100 );

		let speed = 0;
		let num = css ( obj, 'rotateX' );
		clearInterval ( obj.timer );
		obj.timer = setInterval ( function () {
			speed += ( target - css ( obj, 'rotateX' ) ) / 16;
			speed *= 0.8;
			num += speed;
			if ( num < 0 ) num = 0;
			css ( obj, 'rotateX', num );

			if ( speed < 1 && Math.abs ( target - num ) < 1 ) {
				clearInterval ( obj.timer );
				css ( obj, 'rotateX', target );
				endFn && endFn.call ( obj );
			}
		}, 30 );
	}
});

// 通用的获取宽高
let commonWH = ( function () {
	// 监听高度变化
	function listenerHChange () {
		// 监听banner图高度
		window.addEventListener ( "resize", myBanner.setBannerWH, false );
		// 监听主区域内容高度
		window.addEventListener ( "resize", setMainCoreH, false );
		// 监听主体区域垂直居中的高度
		window.addEventListener ( "resize", countThreeScreenH, false );
	}
	
	// 设置核心区域的高度
	function setMainCoreH () {
		// 设置内容主体区域外框的高度就等于可视区的高度
		oCoreCont.style.height = viewHeight () + 'px';
		
		// 设置每一屏的高度就是可视区的高度
		for ( let i = 0, len = aCommonS.length; i < len; i++ ) {
			aCommonS[i].style.height = viewHeight () + 'px';
		}
		
		// 切换到不同屏的时候，把top值重新计算，避免用户在缩放浏览器的时候top值不对哈
		oScreList.style.top = -iIndex * viewHeight () + 'px';
	}
	
	// 计算第三屏的padding-top
	function countThreeScreenH () {
		let oThreeCenter = document.querySelectorAll ( ".threeCenter" )[0];
		oThreeCenter.style.marginTop = ( viewHeight () - oThreeCenter.offsetHeight - oHeader.offsetHeight ) / 2 + oHeader.offsetHeight + 'px';
	}
	
	// 向外暴露，让外面可以访问到这个方法
	return {
		listenerHChange: listenerHChange,
		setMainCoreH: setMainCoreH,
		countThreeScreenH: countThreeScreenH
	};
}) ();

// 我的鼠标滚轮操作
let myMouseWheel = ( function () {
	let oNav = document.querySelectorAll ( ".nav" )[0];
	let aLi = oNav.querySelectorAll ( "li" );
	let aA = oNav.querySelectorAll ( "a" );
	// 这里建立一个开关，统一鼠标滚轮的方向
	let onOff = true;
	// 建立一个定时器变量
	let timer = null;
	
	// 当滑动鼠标滚轮的时候进行切屏操作
	function slideScreen () {
		// FF浏览器使用的是DOMMouseScroll事件
		if ( oCoreCont.addEventListener ) {
			oCoreCont.addEventListener ( "DOMMouseScroll", commonDelayFn, false );
		}
		// IE Chrome使用的是mousewheel
		oCoreCont.addEventListener ( "mousewheel", commonDelayFn, false );
	}
	
	// 通用的延迟处理函数
	function commonDelayFn ( ev ) {
		// 获取事件对象
		let oEvent = ev || window.event;
		clearTimeout ( timer );
		timer = setTimeout ( function () {
			toChange ( oEvent );
		}, 300 );
	}
	
	// 鼠标滚轮操作
	function toChange ( ev ) {
		// 先清除所有
		for ( let i = 0, len = aCircle.length; i < len; i++ ) {
			aCircle[i].className = '';
		}
		
		// 👇 3 👆 -3 FF
		// alert ( ev.detail );
		// 👇 -120 👆 120 IE Chrome
		// alert ( ev.wheelDelta );
		// FF
		if ( ev.detail ) {
			onOff = ev.detail > 0 ? true: false;
		// IE、Chrome
		} else {
			onOff = ev.wheelDelta < 0 ? true: false;
		}
		
		// 条件限制 - 当iIndex为0并且方向为上或iIndex为4并且方向为下，则不执行下面的代码
		if ( ( iIndex == 0 && !onOff ) || ( iIndex == aCommonS.length - 1 && onOff ) ) return;
		
		// 记录上一屏的索引值
		prevIndex = iIndex;
		
		// 滚轮向下
		if ( onOff ) {
			// 条件限制
			if ( iIndex != aCommonS.length - 1 ) {
				iIndex++;
			}
			
			// 运动到指定的那一屏
			// myNav.toMoveNav ( iIndex );
		// 滚轮向上
		} else {
			// 条件限制
			if ( iIndex != 0 ) {
				iIndex--;
			}
			
			// 运动到指定的那一屏
			// myNav.toMoveNav ( iIndex );
		}
		
		// 创建鼠标事件
		let oEvObj = document.createEvent ( "MouseEvents" );
		// 这里的click可以换成你想触发的行为
		oEvObj.initEvent ( "click", true, true );　
		// 循环加事件
		for ( let i = 0; i < aA.length; i++ ) {
			// 这里的aA[i]可以换成你想触发行为的DOM节点
			aA[iIndex].dispatchEvent ( oEvObj );
		}
		
		// 当前的加上active
		aCircle[iIndex].className = 'active';
	}
	
	// 向外暴露，让外面可以访问到这个方法
	return {
		slideScreen: slideScreen
	};
}) ();

// banner区域的一些效果
let myBanner = ( function () {
	let iNow = 0;
	let iTimer = null;
	// 获取元素
	let oMyNav = document.querySelectorAll ( ".myNav" )[0];
	let aMyNavLi = oMyNav.querySelectorAll ( "li" );
	let aBtn = oMyNav.querySelectorAll ( "a" );
	let oPrev = document.querySelectorAll ( ".prev" )[0];
	let oNext = document.querySelectorAll ( ".next" )[0];
	// 这里动态计算ul的高度
	oUl.style.width = aLi.length * 100 + '%';
	
	// 设置轮播图的高度
	function setBannerWH () {
		// 设置第一屏banner图的宽高
		for ( let j = 0, len = aLi.length; j < len; j++ ) {
			aLi[j].style.width = viewWidth () + 'px';
			aLi[j].style.height = viewHeight () + 'px';
		}
	}
	
	// 自动播放函数
	function autoPlay () {
		kaiyouTweenStartMove ( aBtn[iNow], {
			width: 56
		}, 3900, "easeBoth", function () {
			iNow++;
			if ( iNow > aBtn.length - 1 ) {
				iNow = 0;
			}
			
			// 监听下这个函数
			listenerChange ();
		});
	}
	
	// 通用的opacity和left值的变化
	function listenerChange () {
		for ( let i = 0, len = aBtn.length; i < len; i++ ) {
			// 将其它的aBtn - 0毫秒带入success
			kaiyouTweenStartMove ( aBtn[i], {
				width: 0
			}, 0, "easeBoth", function () {
				// console.log ( "将其它的aBtn - 0毫秒带入success" );
			});
		}
		
		// for ( let i = 0, len = aLi.length; i < len; i++ ) {
		// 	// 将当前li - 0毫秒带入success
		// 	kaiyouTweenStartMove ( aLi[i], {
		// 		opacity: 0
		// 	}, 0, "easeBoth", function () {
		// 		// console.log ( "将当前li - 0毫秒带入success" );
		// 	});
		// }
		
		// // 将当前li - 0毫秒带入success
		// kaiyouTweenStartMove ( aLi[iNow], {
		// 	opacity: 100
		// }, 0, "easeBoth", function () {
		// 	// console.log ( "将当前li - 0毫秒带入success" );
		// });
		
		// 将当前ul - 0毫秒带入success
		kaiyouTweenStartMove ( oUl, {
			left: -iNow * 100 + '%'
		}, 0, "easeBoth", function () {
			// console.log ( "将当前ul - 0毫秒带入success" );
		});
	}
	
	// 封装通用的部分代码
	function commonFnBundle () {
		// 监听图片的改变
		listenerChange ();
		
		// 自动轮播图片
		autoPlay ();
		
		clearInterval ( iTimer );
		iTimer = setInterval ( autoPlay, 4000 );
	}
	
	// 点击上一张
	function prev () {
		// 清除banner图的transition
		myLoading.clearUlTrans ();
		
		iNow--;
		
		if ( iNow <= -1 ) {
			iNow = aBtn.length - 1;
		}
		
		commonFnBundle ();
	}
	
	// 点击下一张
	function next () {
		// 清除banner图的transition
		myLoading.clearUlTrans ();
		
		iNow++;
		
		if ( iNow >= aBtn.length ) {
			iNow = 0;
		}
		
		commonFnBundle ();
	}
	
	// 设置Banner图自动轮播
	function autoBannerPicPlay () {
		// 一上来就调用
		autoPlay ();
		
		// 点击上一张
		oPrev.addEventListener ( "click", prev, false );
		
		// 点击下一张
		oNext.addEventListener ( "click", next, false );
		
		// 点击轮播点
		for ( let i = 0, len = aMyNavLi.length; i < len; i++ ) {
			aMyNavLi[i].index = i;
			aMyNavLi[i].addEventListener ( "click", function () {
				// 防止重复点击
				if ( iNow == this.index ) return;
				iNow = this.index;
				commonFnBundle ();
			}, false );
		}
		
		// 每次开启定时器之前先清除上一次的定时器，保证每次只有一个定时器在工作
		clearInterval ( iTimer );
		iTimer = setInterval ( autoPlay, 4000 );
	}
	
	// 上一张的透明度0
	function prevOpacityZero () {
		oPrev.style.filter = 'alpha ( opacity = 0 )';
		oPrev.style.opacity = '0';
	}
	
	// 上一张透明度100
	function prevOpacityFull () {
		oPrev.style.filter = 'alpha ( opacity = 100 )';
		oPrev.style.opacity = '1';
	}
	
	// 下一张的透明度0
	function nextOpacityZero () {
		oNext.style.filter = 'alpha ( opacity = 0 )';
		oNext.style.opacity = '0';
	}
	
	// 下一张透明度100
	function nextOpacityFull () {
		oNext.style.filter = 'alpha ( opacity = 100 )';
		oNext.style.opacity = '1';
	}
	
	function fnMove ( ev ) {
		let oEvent = ev || window.event;
		let x = mousePosition ( oEvent ).x;
		if ( x < oMyBanner.offsetWidth / 2 ) {
			prevOpacityFull ();
			nextOpacityZero ();
		} else {
			prevOpacityZero ();
			nextOpacityFull ();
		}
	}
	
	// 设置鼠标移入显示左右的箭头
	function setHoverEffect () {
		oMyBanner.addEventListener ( "mousemove", fnMove, false );
		
		oMyBanner.addEventListener ( "mouseout", function () {
			prevOpacityZero ();
			nextOpacityZero ();
		}, false );
		
		oPrev.addEventListener ( "mouseover", function ( ev ) {
			stopBubble ( ev );
			prevOpacityFull ();
		}, false );
		
		oNext.addEventListener ( "mouseover", function ( ev ) {
			stopBubble ( ev );
			nextOpacityFull ();
		}, false );
	}
	
	// 向外暴露，让外面可以访问到这个方法
	return {
		setBannerWH: setBannerWH,
		setHoverEffect: setHoverEffect,
		autoBannerPicPlay: autoBannerPicPlay
	};
}) ();

// 求职招聘板块相关
let jobHunting = ( function () {
	// 旧的hash值
	let oldHash = "";
	// 用来拼接的变量
	let oInner = [];
	// 分页相关变量
	// 每页多少条
	let pageSize = 3;
	// 总共页数
	let totalPage = 0;
	// 当前在第几页
	let iNowPage = 0;
	// 分页父级元素
	let oPage = document.querySelectorAll ( ".page" )[0];
	// 获取相关元素
	let oCompanyPos = document.querySelectorAll ( ".companyPos" )[0];
	let oCompanyDesc = document.querySelectorAll ( ".companyDesc" )[0];
	// 记录是第几个选项卡 - 变量
	// let iNow = 0;
	// 选项卡切换相关变量
	let oMyPosBtn = document.querySelectorAll ( ".myPosBtn" )[0];
	let oSpan = oMyPosBtn.querySelectorAll ( "span" )[0];
	let aBtn = oMyPosBtn.querySelectorAll ( "a" );
	let aCommonC = document.querySelectorAll ( ".commonC" );
	
	// 我的初始化方法
	function init () {
		toChangeTab ();
	}
	
	// 点击设置分页active状态
	function setPageStatus () {
		// 每次点击分页切换的时候都让结构重新生成
		oPage.innerHTML = '';
		// 上来立马就调用执行下
		showPageList ();
		for ( let i = 0; i < totalPage; i++ ) {
			let oA = document.createElement ( "a" );
			oA.innerHTML = ( i + 1 );
			oA.href = 'javascript:;';
			if ( i == iNowPage ) oA.className = 'active';
			
			// 给分页按钮添加点击事件
			oA.addEventListener ( "click", function () {
				// 清除上一次a的active
				oPage.children[iNowPage].className = '';
				// 将当前点击的那个active赋值给iNowPage
				iNowPage = i;
				// 给当前加上active
				this.className = 'active';
				// 调用对应需要展示的分页列表数据
				showPageList ();
			}, false );
			
			// 添加进Dom结构里
			oPage.appendChild ( oA );
		}
	}
	
	// 点击对应分页需要展示的列表数据
	function showPageList () {
		// console.log ( `当前页：${ iNowPage } - 总共页：${ totalPage } - 总数据：${ oCompanyPos.children.length }` );
		let oStart = iNowPage * pageSize;
		let oEnd = ( iNowPage + 1 ) * pageSize;
		
		// 最大不能超过length，超过了length就等于length，否则就是它本身(注意：不限制范围会报错哈)
		oEnd = oEnd > oCompanyPos.children.length ? oCompanyPos.children.length : oEnd;
		
		// 先清空所有
		for ( let i = 0; i < oCompanyPos.children.length; i++ ) {
			oCompanyPos.children[i].style.display = "none";
		}
		
		// 再进行分页
		for ( let j = oStart; j < oEnd; j++ ) {
			oCompanyPos.children[j].style.display = "block";
		}
	}
	
	// 点击查看详情展开收缩
	function showAndHideList () {
		let aWatchDetails = document.querySelectorAll ( ".watchDetails" );
		let aJobRequirements = document.querySelectorAll ( ".jobRequirements" );
		let iH = 0;
		for ( let i = 0, len = aWatchDetails.length; i < len; i++ ) {
			// 添加自定义索引值
			aWatchDetails[i].index = i;
			// 给每个对象添加开关进行分别的控制
			aWatchDetails[i].bBtn = true;
			aWatchDetails[i].addEventListener ( "click", function () {
				iH = aJobRequirements[this.index].scrollHeight;
				if ( this.bBtn ) {
					kaiyouStartMove ( aJobRequirements[this.index], { 
						height: iH,
						opacity: 100
					}, KAIYOU_MOVE_TYPE.BUFFER );
					this.className = 'watchDetails up';
				} else {
					kaiyouStartMove ( aJobRequirements[this.index], { 
						height: 0,
						opacity: 0
					}, KAIYOU_MOVE_TYPE.BUFFER );
					this.className = 'watchDetails';
				}
				this.bBtn = !this.bBtn;
			}, false );
		}
	}
	
	// 添加active的操作
	function toAddActive ( index ) {
		for ( let i = 0, len = aBtn.length; i < len; i++ ) {
			aCommonC[i].style.display = 'none';
			// 加个透明度的过渡变化
			kaiyouStartMove ( aCommonC[i], { opacity: 0 }, KAIYOU_MOVE_TYPE.BUFFER );
		}
		aCommonC[index].style.display = 'block';
		kaiyouStartMove ( aCommonC[index], { opacity: 100 }, KAIYOU_MOVE_TYPE.BUFFER );
		if ( index == 0 ) {
			kaiyouStartMove ( oSpan, { top: 0 }, KAIYOU_MOVE_TYPE.FLEX );
		} else if ( index == 1 ) {
			kaiyouStartMove ( oSpan, { top: 60 }, KAIYOU_MOVE_TYPE.FLEX );
		}
	}
	
	// 点击切换选项卡
	function toChangeTab () {
		for ( let i = 0, len = aBtn.length; i < len; i++ ) {
			aBtn[i].index = i;
			aBtn[i].addEventListener ( "click", function () {
				let oHash = this.dataset.hash;
				window.location.hash = oHash;
				for ( let i = 0; i < aCommonC.length; i++ ) {
					// CSS3酷炫动画，先将每一屏出场，然后在滚屏的时候调用入场动画
					// 需要动画就调用出场动画
					// css3Animate.init ();
					if ( oHash == aCommonC[i].dataset.hash ) {
						iNow = this.index;
						toAddActive ( iNow ); 
					}
				}
			}, false );
		}
		
		// 监听hashchange事件
		window.addEventListener ( "hashchange", getMyHash, false );
		
		// 上来就手动调用一下
		getMyHash ();
		
	}
	
	// 获取hash
	function getMyHash () {
		let oFirstHash = window.location.hash.substring ( 1 );
		let oInfoData = data[oFirstHash];
		for ( let i = 0; i < aCommonC.length; i++ ) {
			if ( oFirstHash == aCommonC[i].dataset.hash ) {
				iIndex = 2;
				myNav.toMoveNav ( iIndex );
				if ( oFirstHash == "social" ) {
					// console.log ( "社会招聘" );
					i = 0;
					toAddActive ( i );
					oInner = oInfoData.map ( item => {
						return ( `
							<li>
								<h1>${ item.name }</h1>
								<div class="myPosDesc clearFix">
									<div class="item">
										<label>${ item.department.label }</label>
										<strong>${ item.department.name }</strong>
									</div>
									<div class="item">
										<label>${ item.treatment.label }</label>
										<strong>${ item.treatment.reward }</strong>
									</div>
									<div class="item">
										<label>${ item.placeOfWork.label }</label>
										<strong>${ item.placeOfWork.address }</strong>
									</div>
									<div class="item">
										<label>${ item.typeOfWork.label }</label>
										<strong>${ item.typeOfWork.type }</strong>
									</div>
									<div class="item">
										<label>${ item.publishTime.label }</label>
										<strong>${ item.publishTime.date }</strong>
									</div>
									<div class="item">
										<label>${ item.recruitment.label }</label>
										<strong>${ item.recruitment.num }人</strong>
									</div>
								</div>
								<!-- <a class="watchDetails" href="javascript:;">${ item.seeDetails.title }</a> -->
								<div class="jobRequirements">
									<h2>${ item.seeDetails.subTitle }</h2>
									<ul>
										${ item.seeDetails.content.map ( item => `<li>${ item }</li>` ).join ( '' ) }
									</ul>
								</div>
							</li>
						` );
					}).join ( '' );
					// console.log ( oInner );
					// 添加进去
					oCompanyPos.innerHTML = oInner;
				} else if ( i == 1 ) {
					// console.log ( "福利待遇" );
					i = 1;
					toAddActive ( i );
					oInner = oInfoData.map ( item => {
						return ( `
							<h1>${ item.name }</h1>
							<h2>${ item.title }</h2>
							<div class="welfare">
								<ul>
									<li>
										${ item.welfare.one }
									</li>
									<li>
										${ item.welfare.two }
									</li>
									<li>
										${ item.welfare.three }
									</li>
									<li>
										${ item.welfare.four }
									</li>
									<li>
										${ item.welfare.five }
									</li>
									<li>
										${ item.welfare.six }
									</li>
									<li>
										${ item.welfare.seven }
									</li>
								</ul>
							</div>
							<div class="address">
								<ol>
									<li>
										${ item.contact.title }
									</li>
									<li>
										${ item.contact.contactPerson }
									</li>
									<li>
										${ item.contact.contactPhone }
									</li>
									<li>
										${ item.contact.contactMobile }
									</li>
									<li>
										${ item.contact.companyAddr }
									</li>
								</ol>
							</div>
						` );
					}).join ( '' );
					// console.log ( oInner );
					oCompanyDesc.innerHTML = oInner;
				}
			}
		}
	}
	
	// 向外暴露，让外面可以访问到这个方法
	return {
		init: init
	};
}) ();

// 自定义滚动条PC端
let customScrollBar = ( function () {
	let oMyPosCont = document.querySelectorAll ( ".myPosCont" )[0];
	let oComP = document.querySelectorAll ( "#comP" )[0];
	let oComPCont = document.querySelectorAll ( ".comPCont" )[0];
	let oCompanyPos = document.querySelectorAll ( ".companyPos" )[0];
	let oBar = document.querySelectorAll ( "#bar" )[0];
	
	// 设置滚动条的高度
	let oScale = oComP.clientHeight / oCompanyPos.offsetHeight;
	css ( oBar, "height", Math.round ( oComP.clientHeight * oScale ) );
	// console.log ( Math.round ( oComP.clientHeight * oScale ) );
	
	// 初始化操作
	function init () {
		// 初始化调用的方法
		myAddEvent ( oMyPosCont, 'mousewheel', onMouseWheel );
		myAddEvent ( oMyPosCont, 'DOMMouseScroll', onMouseWheel );
		myAddEvent ( oBar, 'mousedown', slidePosCont );
	}
	
	// 针对鼠标滚轮的操作
	function onMouseWheel ( ev ) {
		let oEvent = ev || window.event;
		// 阻止下冒泡操作
		stopBubble ( oEvent );
		let bDown = true;
		bDown = oEvent.wheelDelta ? oEvent.wheelDelta < 0 : oEvent.detail > 0;
		
		if ( bDown ) {
			setTop ( oBar.offsetTop + 50 );
		} else {
			setTop ( oBar.offsetTop - 50 );
		}
		
		// 阻止默认行为
		if ( oEvent.preventDefault ) {
			oEvent.preventDefault ();
		}
		
		return false;
	}
	
	// 点击滑动我的内容
	function slidePosCont ( ev ) {
		let oEvent = ev || window.event;
		oEvent.preventDefault ();
		let oDisY = oEvent.clientY - oBar.offsetTop;
		
		document.onmousemove = function ( ev ) {
			let oEvent = ev || window.event;
			oEvent.preventDefault ();
			let t = oEvent.clientY - oDisY;
			setTop ( t );
		};
		
		document.onmouseup = function () {
			document.onmousemove = null;
			document.onmouseup = null;
		};
	}
	
	// 设置要去到的top值位置
	function setTop ( t ) {
		if ( t < 0 ) {
			t = 0;
		} else if ( t > oComP.offsetHeight - oBar.offsetHeight ) {
			t = oComP.offsetHeight - oBar.offsetHeight;
		}
		
		// oBar.style.top = t + 'px';
		kaiyouStartMove ( oBar, { top: t }, KAIYOU_MOVE_TYPE.BUFFER );
		
		let oScale = t / ( oComP.offsetHeight - oBar.offsetHeight );
		
		// oCompanyPos.style.top = -( oCompanyPos.offsetHeight - oComP.offsetHeight ) * oScale + 'px';
		kaiyouStartMove ( oCompanyPos, { top: -( oCompanyPos.offsetHeight - oComP.offsetHeight ) * oScale }, KAIYOU_MOVE_TYPE.BUFFER );
		
		// document.title = oScale;
	}
	
	// 向外暴露，让外面可以访问到这个方法
	return {
		init: init
	};
}) ();

// 酷炫的入场出场滚屏动画
let css3Animate = ( function () {
	// 初始化调用方法
	function init () {
		// 先将所有屏调出场动画
		for ( let i = 0; i < cjAnimate.length; i++ ) {
			cjAnimate[i].outAn ();
		}
	}
	
	// 向外暴露，让外面可以访问到这个方法
	return {
		init: init
	};
}) ();

// 底部运动的元素
let myFooterSlide = ( function () {
	let oZeek = document.querySelectorAll ( ".zeek" )[0];
	let oKyZeek = document.querySelectorAll ( ".ky-zeek" )[0];
	let oStrong = oKyZeek.querySelectorAll ( "strong")[0];
	let oMyFooterBtn = document.querySelectorAll ( ".myFooterBtn" )[0];
	let aBtn = oMyFooterBtn.querySelectorAll ( "a" );
	let aSpan = oMyFooterBtn.querySelectorAll ( "span" );
	let oPhone = document.querySelectorAll ( ".phone" )[0];
	let oPhoneA = oPhone.querySelectorAll ( "a" )[0];
	let timer = null;
	let timer1 = null;
	
	// 初始化方法
	function init () {
		mySlideEffect ();
	}
	// ---one start--- //
	function toMoveOneEnterCommonFn () {
		aSpan[0].className = 'noActive';
		aSpan[0].innerHTML = '联系<br />电话';
		aBtn[0].style.backgroundColor = '#fcda06';
		toMoveOneEnter ();
	}
	
	function toMoveOneLeaveCommonFn () {
		aSpan[0].className = 'active';
		aSpan[0].innerHTML = '';
		aBtn[0].style.backgroundColor = '#fff';
		toMoveOneLeave ();
	}
	// ---one end--- //
	
	// ---two start--- //
	function toMoveTwoEnterCommonFn () {
		aSpan[1].className = 'noActive';
		aSpan[1].innerHTML = '咨询<br />客服';
		aBtn[1].style.backgroundColor = '#fcda06';
		toMoveTwoEnter ();
	}
	
	function toMoveTwoLeaveCommonFn () {
		aSpan[1].className = 'active';
		aSpan[1].innerHTML = '';
		aBtn[1].style.backgroundColor = '#fff';
		toMoveTwoLeave ();
	}
	// ---two end--- //
	
	// 鼠标移入
	function toMoveOneEnter () {
		clearTimeout ( timer1 );
		timer1 = setTimeout ( function () {
			perfectKaiyouStartMove ( oPhone, {
				right: 50,
				opacity: 100
			});
		}, 30 );
	}
	
	// 鼠标移入
	function toMoveOneLeave () {
		clearTimeout ( timer1 );
		timer1 = setTimeout ( function () {
			perfectKaiyouStartMove ( oPhone, {
				right: -128,
				opacity: 0
			});
		}, 30 );
	}
	
	// 鼠标移入
	function toMoveTwoEnter () {
		clearTimeout ( timer );
		timer = setTimeout ( function () {
			perfectKaiyouStartMove ( oStrong, {
				right: 50,
				opacity: 100
			}, function () {
				perfectKaiyouStartMove ( oZeek, {
					bottom: 0,
					opacity: 100
				});
			});
		}, 30 );
	}
	
	// 鼠标移出
	function toMoveTwoLeave () {
		clearTimeout ( timer );
		timer = setTimeout ( function () {
			perfectKaiyouStartMove ( oZeek, {
				bottom: -158,
				opacity: 0
			}, function () {
				perfectKaiyouStartMove ( oStrong, {
					right: -140,
					opacity: 0
				}, function () {
				});
			});
		}, 30 );
	}
	
	// 我的滑动特效
	function mySlideEffect () {
		// 鼠标移入
		aBtn[0].addEventListener ( "mouseenter", toMoveOneEnterCommonFn, false );
		oPhoneA.addEventListener ( "mouseenter", toMoveOneEnterCommonFn, false );
		
		// 鼠标移入
		aBtn[1].addEventListener ( "mouseenter", toMoveTwoEnterCommonFn, false );
		oZeek.addEventListener ( "mouseenter", toMoveTwoEnterCommonFn, false );
		oKyZeek.addEventListener ( "mouseenter", toMoveTwoEnterCommonFn, false );
		
		// 鼠标移出
		aBtn[0].addEventListener ( "mouseleave", toMoveOneLeaveCommonFn, false );
		oPhoneA.addEventListener ( "mouseleave", toMoveOneLeaveCommonFn, false );
		
		// 鼠标移出
		aBtn[1].addEventListener ( "mouseleave", toMoveTwoLeaveCommonFn, false );
		oZeek.addEventListener ( "mouseleave", toMoveTwoLeaveCommonFn, false );
		oKyZeek.addEventListener ( "mouseleave", toMoveTwoLeaveCommonFn, false );
	}
	
	// 向外暴露，让外面可以访问到这个方法
	return {
		init: init
	};
}) ();

// 点击菜单导航设置hash的方法
let mySetHash = ( function () {
	let oNav = document.querySelectorAll ( ".nav" )[0];
	let aLi = oNav.querySelectorAll ( "li" );
	let aA = oNav.querySelectorAll ( "a" );
	
	// hash值初始化方法
	function init () {
		setHash ();
	}
	
	// 设置hash
	function setHash () {
		for ( let i = 0; i < aA.length; i++ ) {
			aA[i].index = i;
			aA[i].addEventListener ( "click", function () {
				let oHash = this.dataset.hash;
				// 在点击导航菜单的时候将hash值设置上
				window.location.hash = oHash;
				for ( let i = 0; i < aCommonS.length; i++ ) {
					// 防止用户重复点击的bug
					if ( this.index == iIndex ) return;
					// 先调用下让全部屏的出场动画
					css3Animate.init ();
					if ( oHash == aCommonS[i].dataset.hash ) {
						iIndex = this.index;
						myNav.toMoveNav ( iIndex );
					}
				}
			}, false );
		}
		
		// 监听hashchange事件
		window.addEventListener ( "hashchange", getHash, false ); 
		
		// 这里手动调用一下
		getHash ();
	}
	
	// 获取hash
	function getHash () {
		let oFirstHash = window.location.hash.substring ( 1 ) || "index";
		for ( let i = 0; i < aCommonS.length; i++ ) {
			if ( oFirstHash == aCommonS[i].dataset.hash ) {
				iIndex = i;
				myNav.toMoveNav ( iIndex );
			}  
		}
	}
	
	// 向外暴露，让外面可以访问到这个方法
	return {
		init: init,
		setHash: setHash,
		getHash: getHash
	};
}) ();

// 我的loading效果
let myLoading = ( function () {
	// 定义一个开关
	let onOff = true;
	// 定义一个计数的变量
	// let iNum = 0;
	// 我的loading元素
	let oLoading = document.querySelectorAll ( ".loading" )[0];
	// 我的百分比变量
	let oText = document.querySelectorAll ( ".text" )[0];
	// 我的animation元素
	let oPic = document.querySelectorAll ( ".pic" )[0];
	let oPic2 = document.querySelectorAll ( ".pic2" )[0];
	let oPic3 = document.querySelectorAll ( ".pic3" )[0];
	let oShadow = document.querySelectorAll ( ".shadow" )[0];
	// 我的两块打开的div
	let oMyMask = document.querySelectorAll ( ".myMask" )[0];
	let aDiv = oMyMask.querySelectorAll ( "div" );
	
	// 初始化方法
	function init () {
		setLoading ();
	}
	
	// 设置我的loading效果
	function setLoading () {
		// 我准备的预加载10张图片 - 百度找的
		let myPicArr = [
			"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572283162840&di=9227865b88ffd643fa7ea2cfe8abbbbf&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F57c39d755f767.jpg",
			"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572283162837&di=71b93acae201fd01376a0da424ebbc9d&imgtype=0&src=http%3A%2F%2Fimg1.lvyou114.com%2FTukuMax%2F36%2F20081226152121.JPG",
			"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572283162836&di=536f30064d1ae10e14fd7735bbf205d8&imgtype=0&src=http%3A%2F%2Fdownload-p160-drcn.platform.hicloud.com%2Fdl%2Fhuafans%2Fpic%2F2019%2F09%2F29%2F0a3fa691f3d9377b22f2423b65969517_1569731226IMG_20190620_193531.jpg%3Fmode%3Ddownload",
			"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572283162846&di=d11c20b5ff95cc389eb57657e78e5bbc&imgtype=0&src=http%3A%2F%2Fpic31.nipic.com%2F20130724%2F1729271_162006091301_2.jpg",
			"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572283240303&di=6361cdf185cb5d6b5d2ef8132597369b&imgtype=0&src=http%3A%2F%2Fpic17.nipic.com%2F20111115%2F8828408_191027614000_2.jpg",
			"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572283240302&di=bda2666a303e057eb35d776ccb739915&imgtype=0&src=http%3A%2F%2Fpic25.nipic.com%2F20121024%2F9771387_194842589106_2.jpg",
			"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572283240301&di=948db6d415f3770cf1e09cfec76aa78d&imgtype=0&src=http%3A%2F%2Fpic1.nipic.com%2F2009-02-24%2F200922482815876_2.jpg",
			"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572283240301&di=c50a143827849238ca1e63145932a0c3&imgtype=0&src=http%3A%2F%2Fimg1.lvyou114.com%2FTuPhoto%2F2008227194756.jpg",
			"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572283279500&di=a678efe3167667713d60f0b5fce53555&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F29%2F20180429071528_fjyzk.jpg",
			"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572283279499&di=e445925e604e6e5f50def14683438b61&imgtype=0&src=http%3A%2F%2Fpic27.nipic.com%2F20130326%2F1682937_000918100000_2.jpg"
		];
		
		// 封装的写法
		preloadImgs ( myPicArr, function () {
			// alert ( "加载成功" );
			// 图片加载成功的第一件事就是停止相关的CSS动画
			oPic.style.WebkitAnimationPlayState = 'paused';
			oPic.style.animationPlayState = 'paused';
			oPic2.style.WebkitAnimationPlayState = 'paused';
			oPic2.style.animationPlayState = 'paused';
			oPic3.style.WebkitAnimationPlayState = 'paused';
			oPic3.style.animationPlayState = 'paused';
			oShadow.style.WebkitAnimationPlayState = 'paused';
			oShadow.style.animationPlayState = 'paused';
			// 监听动画是否停止 oPic3.style.animationPlayState == "paused"
			if ( onOff ) { // 通过boolean值来作为判断的条件
				// console.log ( "动画停止" );
				oLoading.style.display = 'none';
				aDiv[0].style.height = '0';
				aDiv[1].style.height = '0';
			}
			
			// div上下展开之后，通过监听webkitTransitionEnd事件来进行第一屏的入场动画和移除不要元素的操作
			aDiv[0].addEventListener ( 'webkitTransitionEnd', divChange, false );
			aDiv[0].addEventListener ( 'transitionend', divChange, false );
		}, function ( iNum ) {
			// alert ( "加载失败" );
			console.log ( "图片哪张是错的：" + iNum );
			// 图片加载成功的第一件事就是停止相关的CSS动画
			oPic.style.WebkitAnimationPlayState = 'paused';
			oPic.style.animationPlayState = 'paused';
			oPic2.style.WebkitAnimationPlayState = 'paused';
			oPic2.style.animationPlayState = 'paused';
			oPic3.style.WebkitAnimationPlayState = 'paused';
			oPic3.style.animationPlayState = 'paused';
			oShadow.style.WebkitAnimationPlayState = 'paused';
			oShadow.style.animationPlayState = 'paused';
		}, function ( iNum ) {
			// alert ( "加载中......" );
			// alert ( iNum );
			oText.innerHTML = iNum + '%';
		});
		
		// 这句TMD的就有bug
		// kaiyouEnd.addAnimEvent ( oPic, callback );
		
		// 传统的写法
		/** for ( let i = 0; i < myPicArr.length; i++ ) {
			let oImg = new Image ();
			oImg.src = myPicArr[i];
			oImg.index = i;
			oImg.onload = function () {
				iNum++;
				oText.innerHTML = ( iNum / myPicArr.length ) * 100 + '%';
				// 图片加载成功
				if ( iNum == myPicArr.length ) {
					alert ( "图片加载成功" );
					// 图片加载成功的第一件事就是停止相关的CSS动画
					oPic.style.WebkitAnimationPlayState = 'paused';
					oPic.style.animationPlayState = 'paused';
					oPic2.style.WebkitAnimationPlayState = 'paused';
					oPic2.style.animationPlayState = 'paused';
					oPic3.style.WebkitAnimationPlayState = 'paused';
					oPic3.style.animationPlayState = 'paused';
					oShadow.style.WebkitAnimationPlayState = 'paused';
					oShadow.style.animationPlayState = 'paused';
				}
			};
			
			oImg.onerror = function () {
				alert ( "错图是第：" + this.index  + "张");
				iNum++;
				oText.innerHTML = ( iNum / myPicArr.length ) * 100 + '%';
				// 图片加载成功
				if ( iNum == myPicArr.length ) {
					alert ( "图片加载成功" );
					// 图片加载成功的第一件事就是停止相关的CSS动画
					oPic.style.WebkitAnimationPlayState = 'paused';
					oPic.style.animationPlayState = 'paused';
					oPic2.style.WebkitAnimationPlayState = 'paused';
					oPic2.style.animationPlayState = 'paused';
					oPic3.style.WebkitAnimationPlayState = 'paused';
					oPic3.style.animationPlayState = 'paused';
					oShadow.style.WebkitAnimationPlayState = 'paused';
					oShadow.style.animationPlayState = 'paused';
				}
			};
		} */
	}
	
	// 图片加载到百分100%要做的事
	function divChange () {
		// 把不要的层删除掉
		oLoading.parentNode.removeChild ( oLoading );
		oMyMask.parentNode.removeChild ( oMyMask );
		// alert ( "第一屏要做入场动画了" );
		cjAnimate[0].inAn ();
		// 调用清除ul - banner图的transition过渡
		clearUlTrans ();
		// 等待div都展开了，才开始调用设置Banner图的自动轮播
		myBanner.autoBannerPicPlay ();
	}
	
	// 清除ul - banner图的transition过渡
	function clearUlTrans () {
		// 将banner图的延迟过渡时间去掉
		oUl.style.transition = '.6s 0s';
		oUl.style.webkitTransition = '.6s 0s';
	}
	
	// 向外暴露，让外面可以访问到这个方法
	return {
		init: init,
		clearUlTrans: clearUlTrans
	};
}) ();

// 点击我的箭头要做的事
let myArrow = ( function () {
	let oNav = document.querySelectorAll ( ".nav" )[0];
	let aLi = oNav.querySelectorAll ( "li" );
	let aA = oNav.querySelectorAll ( "a" );
	
	// 初始化的方法
	function init () {
		setMyArrow ();
	}
	
	// 点击我的箭头要做的事
	function setMyArrow () {
		// 循环每一屏的向上或向下箭头
		for ( let i = 0; i < aMyArrow.length; i++ ) {
			// 添加自定义索引值
			aMyArrow[i].index = i;
			// 添加点击事件
			aMyArrow[i].addEventListener ( "click", function () {
				// 获取index值
				iIndex = this.index;
				
				// 这里条件限制下
				if ( iIndex != aCommonS.length - 1 ) {
					// 先调用下让全部屏的出场动画，注意应该在这里调用
					css3Animate.init ();
					
					// 每次递增1
					iIndex++;
				} 
				
				// 创建鼠标事件
				let oEvObj = document.createEvent ( "MouseEvents" );
				// 这里的click可以换成你想触发的行为
				oEvObj.initEvent ( "click", true, true );
				// 循环加事件
				for ( let i = 0; i < aA.length; i++ ) {
					// 这里的aA[iIndex]可以换成你想触发行为的DOM节点
					aA[iIndex].dispatchEvent ( oEvObj );
				}
			}, false );
		}
	}
	
	// 向外暴露，让外面可以访问到这个方法
	return {
		init: init
	};
}) ();